<template>
    <div id="left_menu">
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="todat_news">今日要闻</span>
            </div>
            <div v-for="item in wx_news" :key="item" class="text item">
                <a :href="item.url" class="news_title">{{ item.title }}</a>
            </div>
        </el-card>

        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="todat_news">精彩文章</span>
            </div>
            <div v-for="item in articleInfo" :key="item" class="text item">
                <a :href="item.url" class="news_title">{{ item.title }}</a>
            </div>
        </el-card>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="todat_news">友情链接</span>
            </div>
            <div class="text item">
                <a href="#" class="news_title">微信公众号:周先生自留地</a>
            </div>
            <div class="text item">
                <a href="#" class="news_title">腾讯云+社区:逆月翎</a>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: 'rightsidebar',
        data() {
            return {
                articleNumber: '',
                flag: true,
                title: '逆月翎',
                is_show: true,
                wx_news: [],
                articleInfo: []
            }
        },
        mounted: function() {
            var _this = this;
            this.$req({
                method: "post",
                url: 'http://49.235.28.88:3000/article/v1/wx_news',
                data: {}
            }).then(function(res) {
                if (res.data.status == 200) {
                    _this.wx_news = res.data.payload.data.result.list;
                } else {
                    _this.$message.error('聚合接口可能出现异常!');
                }
            }).catch(function(e) {
                _this.$message.error('服务器可能出现异常!');
            });

            this.$req({
                method: "post",
                url: 'http://49.235.28.88:3000/article/v1/rand_article',
                data: {}
            }).then(function(res) {
                if (res.data.status == 200) {
                    _this.articleInfo = res.data.payload.article;

                    _this.articleInfo.forEach(data => {
                      data.url = 'http://www.niyueling.cn/#/articleDetail/' + data.id;
                    });
                } else {
                    _this.$message.error('文章出现异常!');
                }
            }).catch(function(e) {
                _this.$message.error('服务器可能出现异常!');
            });
        },
        methods: {
            clearCookie() {
                localStorage.removeItem('user');
            }
        }
    }
</script>

<style scoped>
    .news_title {
        color: white;
    }

    .todat_news {
        color: white;
    }

    .text {
        color: white;
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 300px;
        background: url('./../assets/local_back.jpg');
        margin-bottom: 30px;
    }

    h2 {
        color: white;
    }

    #left_menu {
        float: left;
        width: 13%;
        margin-left: 25px;
    }

    @media (max-width: 767px) {
        #left_menu {
            display: none;
        }
    }

    #left_menu a:hover {
        color: black;
        background: white;
    }

    .menu_name {
        color: white;
        padding: 10px 0;
    }

    nav {
        padding: 20px 0;
    }

    .nav {
        padding: 8px 20px;
        font-size: 14px;
        text-align: left;
        margin-bottom: 5px;
        margin-top: 5px;
        color: white;
    }

    .nav:hover {
        background: rgba(0, 0, 0, 0.8);
    }

    .right_bottom {
        padding: 8px 20px;
        font-size: 14px;
        text-align: center;
        float: left;
        color: white;
    }

    .right_bottom:hover {
        color: black;
    }

    .info {
        margin-top: 10px;
        padding: 20px;
    }

    .info_name {
        font-weight: 600;
        padding: 5px;
    }

    .info img {
        width: 120px;
        height: 120px;
    }

    .archive {
        padding-top: 20px;
    }

    .archive .archive_count {
        display: block;
        color: #222;
        font-weight: 600;
        font-size: 16px;
    }

    .archive .archive_name {
        display: block;
        color: #999;
        font-size: 14px;
    }

    .communication {
        padding-top: 20px;
    }

    .communication_item {
        display: inline-block;
        width: 40%;
        font-size: 14px;
        font-weight: 600;
        padding: 5px;
    }

    .active {
        position: relative;
    }

    .active img {
        position: absolute;
        top: -145px;
        left: 35px;
    }
</style>
